<template>
	<view class="container">
		<!-- 安全设置列表 -->
		<view class="security-list">
			<!-- 手机号设置 -->
			<view class="security-item" @click="handleModifyPhone">
				<view class="item-left">
					<text class="label">手机号</text>
					<text class="value">{{ maskPhone(userInfo.phone) }}</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			
			<!-- 密码设置 -->
			<view class="security-item" @click="handleModifyPassword">
				<view class="item-left">
					<text class="label">登录密码</text>
					<text class="value">已设置</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 修改手机号弹窗 -->
		<uni-popup ref="phonePopup" type="center">
			<view class="popup-content">
				<view class="popup-title">修改手机号</view>
				<view class="form-item">
					<uni-easyinput 
						v-model="phoneForm.newPhone"
						placeholder="请输入新的的手机号"
						type="number"
						maxlength="11"
					></uni-easyinput>
				</view>
				<view class="popup-btns">
					<button class="btn cancel" @click="closePhonePopup">取消</button>
					<button 
						class="btn confirm"
						:class="{ disabled: !canSubmitPhone }"
						@click="submitPhoneModify"
					>确认</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 修改密码弹窗 -->
		<uni-popup ref="passwordPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">修改密码</view>
				<view class="form-item">
					<uni-easyinput 
						v-model="passwordForm.oldPassword"
						placeholder="请输入原密码"
						type="password"
					></uni-easyinput>
				</view>
				<view class="form-item">
					<uni-easyinput 
						v-model="passwordForm.newPassword"
						placeholder="请输入新密码"
						type="password"
					></uni-easyinput>
				</view>
				<view class="form-item">
					<uni-easyinput 
						v-model="passwordForm.confirmPassword"
						placeholder="请确认新密码"
						type="password"
					></uni-easyinput>
				</view>
				<view class="popup-btns">
					<button class="btn cancel" @click="closePasswordPopup">取消</button>
					<button 
						class="btn confirm"
						:class="{ disabled: !canSubmitPassword }"
						@click="submitPasswordModify"
					>确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { STORAGE_KEY, updateStorageField } from '@/common/config.js'
import request from "@/common/request.js"
// 用户信息
const userInfo = ref(JSON.parse(uni.getStorageSync(STORAGE_KEY.USER_INFO) || '{}'))

// 手机号表单
const phoneForm = ref({
	newPhone: ''
})

// 密码表单
const passwordForm = ref({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
})

// 弹窗引用
const phonePopup = ref(null)
const passwordPopup = ref(null)

// 手机号加密显示
const maskPhone = (phone) => {
	if (!phone) return ''
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 验证手机号格式
const isValidPhone = computed(() => {
	return /^1[3-9]\d{9}$/.test(phoneForm.value.newPhone)
})

// 是否可提交修改手机号
const canSubmitPhone = computed(() => {
	return isValidPhone.value && phoneForm.value.newPhone !== userInfo.value.phone
})

// 是否可提交修改密码
const canSubmitPassword = computed(() => {
	return passwordForm.value.oldPassword && 
		   passwordForm.value.newPassword && 
		   passwordForm.value.confirmPassword && 
		   passwordForm.value.newPassword === passwordForm.value.confirmPassword
})

// 打开修改手机号弹窗
const handleModifyPhone = () => {
	phonePopup.value.open()
}

// 关闭修改手机号弹窗
const closePhonePopup = () => {
	phonePopup.value.close()
	phoneForm.value = { newPhone: '' }
}

// 打开修改密码弹窗
const handleModifyPassword = () => {
	passwordPopup.value.open()
}

// 关闭修改密码弹窗
const closePasswordPopup = () => {
	passwordPopup.value.close()
	passwordForm.value = { oldPassword: '', newPassword: '', confirmPassword: '' }
}

// 提交修改手机号
const submitPhoneModify = () => {
	if (!canSubmitPhone.value) return
	
	// TODO: 调用修改手机号接口
	uni.showLoading({
		title: '提交中...'
	})
	
	
	setTimeout(() => {
		uni.hideLoading()
		request.post("api/user/change_phone_password/", {
			status: 2,
			phone: phoneForm.value.newPhone
		}, {success: "手机号修改成功"}).then(res => {
			// 更新本地存储的用户信息
			const newUserInfo = { ...userInfo.value, phone: phoneForm.value.newPhone }
			uni.setStorageSync(STORAGE_KEY.USER_INFO, JSON.stringify(newUserInfo))
			userInfo.value = newUserInfo
			closePhonePopup()
		})
	}, 1500)
}

// 提交修改密码
const submitPasswordModify = () => {
	if (!canSubmitPassword.value) return
	
	if (passwordForm.value.newPassword.length < 6) {
		uni.showToast({
			title: '密码长度不能小于6位',
			icon: 'none'
		})
		return
	}
	
	// TODO: 调用修改密码接口
	uni.showLoading({
		title: '提交中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		request.post("api/user/change_phone_password/", {
			status: 1,
			newpassword: passwordForm.value.newPassword,
			password: passwordForm.value.oldPassword
		},  {success: "密码修改成功"}).then(res => {
			closePasswordPopup()
		})
		
	}, 1500)
	
	
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 20rpx;
}

.security-list {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 0 30rpx;
	
	.security-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		
		&:last-child {
			border-bottom: none;
		}
		
		.item-left {
			.label {
				font-size: 28rpx;
				color: #333;
				margin-right: 20rpx;
			}
			
			.value {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}

.popup-content {
	width: 600rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	
	.popup-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.popup-btns {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 40rpx;
		
		.btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			
			&.cancel {
				color: #666;
				background: #f5f5f5;
			}
			
			&.confirm {
				color: #fff;
				background: $theme-color-primary;
				
				&.disabled {
					background: #ccc;
				}
			}
		}
	}
}
</style> 